<template>
    <div class="full-percent">
        <el-table :data="uriInfo" border height="100%" header-cell-class-name="el-table-header-cell"
            cell-class-name="el-table-cell" class="e-page">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="URI" label="URI" width="350">
                <template #default="scope">
                    <div style="cursor: pointer;color: #08c;" @click="uriDetail(scope.row)" class="cursor-pointer">
                        {{ scope.row.URI }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="RequestCount" label="请求次数" width="120" />
            <el-table-column prop="RequestTimeMillis" label="请求时间（和）" width="170" />
            <el-table-column prop="RequestTimeMillisMax" label="请求最慢（单次）" width="190" />
            <el-table-column prop="RunningCount" label="执行中" min-width="100" />
            <el-table-column prop="ConcurrentMax" label="最大并发" min-width="120" />
            <el-table-column prop="JdbcExecuteCount" label="Jdbc执行数" min-width="120" />
            <el-table-column prop="JdbcExecuteErrorCount" label="Jdbc出错数" min-width="120" />
            <el-table-column prop="JdbcExecuteTimeMillis" label="Jdbc时间" min-width="120" />
            <el-table-column prop="JdbcCommitCount" label="事务提交数" width="150" />
            <el-table-column prop="JdbcRollbackCount" label="事务回滚数" min-width="150" />
            <el-table-column prop="JdbcFetchRowCount" label="读取行数" min-width="120" />
            <el-table-column prop="JdbcUpdateCount" label="更新行数" min-width="120" />
            <el-table-column prop="Histogram" label="执行时间分布" min-width="250">
                <template #default="scope">
                    {{ scope.row.Histogram }}
                </template>
            </el-table-column>

        </el-table>

        <el-drawer v-model="showSql" direction="ltr" :show-close="false" @open="open" :close-on-press-escape="false"
            size="80%" @close="close" append-to-body>
            <template #header>
                <div class="font-auto-resize">Web URI View</div>
            </template>
            <el-scrollbar style="height: 100%;width: 100%" ref="scrollRef">
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="URI" labelClassName="label">
                        <div class="forbid-select">{{ detail.URI }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="请求次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.RequestCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="请求时间（和）" labelClassName="label">
                        <div class="forbid-select">{{ detail.RequestTimeMillis }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="最后访问时间" labelClassName="label">
                        <div class="forbid-select">{{ detail.LastAccessTime }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="执行中" labelClassName="label">
                        <div class="forbid-select">{{ detail.RunningCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="最大并发" labelClassName="label">
                        <div class="forbid-select">{{ detail.ConcurrentMax }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Jdbc执行数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcExecuteCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Jdbc出错数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcExecuteErrorCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="jdbc执行峰值" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcExecutePeak }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Jdbc时间" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcExecuteTimeMillis }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="事务提交数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcCommitCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="读取行数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcFetchRowCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="jdbc查询取回行数峰值" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcFetchRowPeak }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="更新行数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcUpdateCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="jdbc更新峰值" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcUpdatePeak }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="连接池获取连接次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcPoolConnectionOpenCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="连接池关闭连接次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcPoolConnectionCloseCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="ResultSet打开次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcResultSetOpenCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="ResultSet关闭次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcResultSetCloseCount }}</div>
                    </el-descriptions-item>
                </el-descriptions>
                <h3>Profiles</h3>
                <el-table :data="detail.Profiles" border header-cell-class-name="el-table-header-cell"
                    cell-class-name="el-table-cell" class="e-page">
                    <el-table-column type="index" label="序号" :width="fontAutoResize.size_4.value" />
                    <el-table-column prop="Name" label="Name" min-width="320" />
                    <el-table-column prop="Parent" label="ParentName" min-width="100" />
                    <el-table-column prop="Type" label="Type" :width="fontAutoResize.size_8.value" />
                    <el-table-column prop="ExecuteCount" label="ExecuteCount" :width="fontAutoResize.size_8.value" />
                    <el-table-column prop="ExecuteTimeMillis" label="ExecuteTimeMillis"
                        :width="fontAutoResize.size_10.value" />
                </el-table>
            </el-scrollbar>
        </el-drawer>
    </div>
</template>
<script setup>
import { useModalSize, useRequest, useUnMounted } from "@usehook"
import { fontAutoResize } from "@/utils/setting"

let uriInfo = $ref([])
let showSql = $ref(false)
let detail = $ref({})
let interval = $ref(null)
const scrollRef = $ref(null)

const getData = () => {
    useRequest({
        url: "/dataSource/druid/weburi.json?orderBy=URI&orderType=desc&page=1&perPageCount=1000000"
    }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            uriInfo = resp.Content
        }
    })
}
const uriDetail = (row) => {
    useRequest({ url: "/dataSource/druid/weburi-" + row.URI + ".json" }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            detail = resp.Content
        }
    }).finally(() => {
        showSql = true
    })
}
const close = () => {
    useModalSize(false)
}
const open = () => {
    useModalSize()
    if (scrollRef) setTimeout(() => {
        scrollRef.wrapRef.scrollTop = 0
    }, 100)
}
const clear = () => {
    if (interval) clearInterval(interval)
    interval = null
}


onActivated(() => {
    getData()
    clear()
    interval = setInterval(() => {
        getData()
    }, 10000)
})

useUnMounted(() => {
    clear()
})

</script>
<style scoped>
:deep(.label) {
    width: 250px;
}

:deep(.el-descriptions-row th) {
    text-align: right !important;
}

:deep(.el-drawer__body) {
    padding: 0 5px;
}

:deep(h3) {
    margin: 10px 0;
}

:deep(.el-drawer__header) {
    margin-bottom: 20px;
}
</style>